/* 科技风格主题样式 */

/* 全局科技背景变量 */
:root {
  --tech-bg-primary: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 50%, #0f1419 100%);
  --tech-bg-secondary: rgba(26, 31, 46, 0.8);
  --tech-accent-color: rgba(120, 220, 255, 0.8);
  --tech-accent-light: rgba(120, 220, 255, 0.5);
  --tech-accent-subtle: rgba(120, 220, 255, 0.2);
  --tech-accent-glow: rgba(120, 220, 255, 0.3);
  --tech-text-primary: rgba(255, 255, 255, 0.95);
  --tech-text-secondary: rgba(255, 255, 255, 0.8);
  --tech-text-muted: rgba(255, 255, 255, 0.6);
  --tech-glass-bg: rgba(255, 255, 255, 0.12);
  --tech-glass-border: rgba(120, 220, 255, 0.25);
  --tech-separator: rgba(50, 100, 150, 0.6);
  --tech-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --tech-shadow-hover: 0 12px 40px rgba(120, 220, 255, 0.15);
}

/* 科技风格卡片基础样式 */
.tech-card {
  background: var(--tech-glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--tech-glass-border);
  border-radius: 12px;
  box-shadow: var(--tech-shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.tech-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tech-accent-color), transparent);
  opacity: 0.8;
}

.tech-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tech-shadow-hover);
  border-color: var(--tech-accent-color);
  background: rgba(255, 255, 255, 0.15);
}

.tech-card:hover::before {
  opacity: 1;
  height: 3px;
}

/* 科技风格标题 */
.tech-title {
  color: var(--tech-text-primary);
  font-weight: 600;
  text-shadow: 0 0 10px var(--tech-accent-subtle);
  margin-bottom: 16px;
}

.tech-title-large {
  font-size: 24px;
  background: linear-gradient(135deg, var(--tech-text-primary), var(--tech-accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tech-title-medium {
  font-size: 18px;
}

.tech-title-small {
  font-size: 16px;
}

/* 科技风格文本 */
.tech-text {
  color: var(--tech-text-secondary);
  line-height: 1.6;
}

.tech-text-muted {
  color: var(--tech-text-muted);
  font-size: 14px;
}

/* 科技风格按钮 */
.tech-button {
  background: var(--tech-glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--tech-glass-border);
  color: var(--tech-text-primary);
  padding: 10px 20px;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-weight: 500;
}

.tech-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--tech-accent-glow), transparent);
  transition: left 0.6s ease;
}

.tech-button:hover {
  border-color: var(--tech-accent-color);
  box-shadow: 0 6px 20px var(--tech-accent-glow);
  background: rgba(120, 220, 255, 0.1);
  transform: translateY(-2px);
}

.tech-button:hover::before {
  left: 100%;
}

/* 科技风格输入框 */
.tech-input {
  background: var(--tech-glass-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--tech-glass-border);
  color: var(--tech-text-primary);
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

.tech-input:focus {
  outline: none;
  border-color: var(--tech-accent-color);
  box-shadow: 0 0 0 2px var(--tech-accent-subtle);
}

.tech-input::placeholder {
  color: var(--tech-text-muted);
}

/* 科技风格表格 */
.tech-table {
  background: var(--tech-glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--tech-glass-border);
  border-radius: 12px;
  overflow: hidden;
}

.tech-table th {
  background: var(--tech-bg-secondary);
  color: var(--tech-text-primary);
  font-weight: 600;
  padding: 16px;
  border-bottom: 1px solid var(--tech-glass-border);
}

.tech-table td {
  color: var(--tech-text-secondary);
  padding: 12px 16px;
  border-bottom: 1px solid rgba(100, 200, 255, 0.05);
}

.tech-table tr:hover {
  background: var(--tech-accent-subtle);
}

/* 科技风格进度条 */
.tech-progress {
  background: var(--tech-glass-bg);
  border-radius: 8px;
  overflow: hidden;
  height: 8px;
  position: relative;
}

.tech-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--tech-accent-color), var(--tech-accent-light));
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.tech-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: tech-shimmer 2s infinite;
}

@keyframes tech-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 科技风格统计卡片 */
.tech-stats-card {
  background: var(--tech-glass-bg);
  backdrop-filter: blur(15px);
  border: 1px solid var(--tech-glass-border);
  border-radius: 18px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tech-stats-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tech-accent-color), var(--tech-accent-light), var(--tech-accent-color));
  opacity: 0.9;
}

.tech-stats-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--tech-shadow-hover);
  border-color: var(--tech-accent-color);
  background: rgba(255, 255, 255, 0.16);
}

.tech-stats-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--tech-text-primary);
  text-shadow: 0 0 25px var(--tech-accent-glow);
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--tech-text-primary), var(--tech-accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tech-stats-label {
  color: var(--tech-text-secondary);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 500;
}

/* 科技风格网格背景（用于内容区域） */
.tech-content-bg {
  position: relative;
  min-height: 100%;
}

.tech-content-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(100, 200, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 200, 255, 0.02) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: -1;
}

/* Element Plus 组件样式覆盖 - 半透明效果 */
.el-card {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--tech-glass-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--tech-shadow) !important;
}

.el-card__header {
  background: rgba(120, 220, 255, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid var(--tech-glass-border) !important;
  color: var(--tech-text-primary) !important;
  font-weight: 600 !important;
}

.el-card__body {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(5px) !important;
  color: var(--tech-text-secondary) !important;
}

/* 表格样式覆盖 - 半透明效果 */
.el-table {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(15px) !important;
  border: 1px solid var(--tech-glass-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.el-table__header-wrapper {
  background: rgba(120, 220, 255, 0.12) !important;
  backdrop-filter: blur(10px) !important;
}

.el-table th {
  background: rgba(120, 220, 255, 0.12) !important;
  backdrop-filter: blur(10px) !important;
  color: var(--tech-text-primary) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--tech-glass-border) !important;
}

.el-table td {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(8px) !important;
  color: var(--tech-text-secondary) !important;
  border-bottom: 1px solid var(--tech-separator) !important;
}

.el-table__row:hover {
  background: rgba(120, 220, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
}

.el-table__empty-block {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(8px) !important;
  color: var(--tech-text-muted) !important;
}

/* 分页器样式 - 半透明效果 */
.el-pagination {
  background: transparent !important;
}

/* 强制覆盖所有分页器相关元素的背景 */
.el-pagination,
.el-pagination *,
.el-pagination .el-pager,
.el-pagination .el-pager li,
.el-pagination .btn-prev,
.el-pagination .btn-next,
.el-pagination__total,
.el-pagination__sizes,
.el-pagination__jump {
  background: transparent !important;
}

.el-pagination .el-pager li {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(8px) !important;
  color: var(--tech-text-secondary) !important;
  border: 1px solid var(--tech-glass-border) !important;
  border-radius: 8px !important;
  margin: 0 3px !important;
  transition: all 0.3s ease !important;
}

.el-pagination .el-pager li:hover,
.el-pagination .el-pager li.is-active {
  background: rgba(120, 220, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  color: white !important;
  border-color: var(--tech-accent-color) !important;
  box-shadow: 0 4px 12px var(--tech-accent-glow) !important;
}

.el-pagination .btn-prev,
.el-pagination .btn-next {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(8px) !important;
  color: var(--tech-text-secondary) !important;
  border: 1px solid var(--tech-glass-border) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.el-pagination .btn-prev:hover,
.el-pagination .btn-next:hover {
  background: rgba(120, 220, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  color: white !important;
  box-shadow: 0 4px 12px var(--tech-accent-glow) !important;
}

/* 分页器文本元素样式 */
.el-pagination__total,
.el-pagination__classifier {
  color: var(--tech-text-primary) !important;
  background: transparent !important;
}

/* 分页器选择器样式 */
.el-pagination__sizes .el-select .el-input__wrapper {
  background: var(--tech-glass-bg) !important;
  border: 1px solid var(--tech-glass-border) !important;
  color: var(--tech-text-primary) !important;
}

/* 分页器跳转输入框样式 */
.el-pagination__jump .el-input__wrapper {
  background: var(--tech-glass-bg) !important;
  border: 1px solid var(--tech-glass-border) !important;
  color: var(--tech-text-primary) !important;
}

/* 面包屑导航样式 */
.el-breadcrumb {
  color: var(--tech-text-secondary) !important;
}

.el-breadcrumb__inner {
  color: var(--tech-text-secondary) !important;
}

.el-breadcrumb__inner:hover {
  color: var(--tech-accent-color) !important;
}

.el-breadcrumb__separator {
  color: var(--tech-text-muted) !important;
}

/* 按钮样式覆盖 - 半透明效果 */
.el-button {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--tech-glass-border) !important;
  color: var(--tech-text-primary) !important;
  border-radius: 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 500 !important;
}

.el-button:hover {
  background: rgba(120, 220, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  border-color: var(--tech-accent-color) !important;
  box-shadow: 0 6px 20px var(--tech-accent-glow) !important;
  transform: translateY(-1px) !important;
}

.el-button--primary {
  background: rgba(120, 220, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border-color: var(--tech-accent-color) !important;
  color: white !important;
  box-shadow: 0 4px 16px var(--tech-accent-glow) !important;
}

.el-button--primary:hover {
  background: rgba(120, 220, 255, 0.9) !important;
  backdrop-filter: blur(15px) !important;
  border-color: var(--tech-accent-color) !important;
  box-shadow: 0 8px 25px var(--tech-accent-glow) !important;
  transform: translateY(-2px) !important;
}

/* 输入框样式覆盖 - 半透明效果 (排除登录页面) */
.main-layout .el-input__wrapper,
.dashboard-container .el-input__wrapper,
.content-wrapper .el-input__wrapper {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--tech-glass-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

.main-layout .el-input__inner,
.dashboard-container .el-input__inner,
.content-wrapper .el-input__inner {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(5px) !important;
  color: var(--tech-text-primary) !important;
}

.main-layout .el-input__inner::placeholder,
.dashboard-container .el-input__inner::placeholder,
.content-wrapper .el-input__inner::placeholder {
  color: var(--tech-text-muted) !important;
}

.main-layout .el-input__wrapper:hover,
.dashboard-container .el-input__wrapper:hover,
.content-wrapper .el-input__wrapper:hover {
  border-color: var(--tech-accent-color) !important;
  background: rgba(120, 220, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
}

.main-layout .el-input__wrapper.is-focus,
.dashboard-container .el-input__wrapper.is-focus,
.content-wrapper .el-input__wrapper.is-focus {
  border-color: var(--tech-accent-color) !important;
  background: rgba(120, 220, 255, 0.1) !important;
  backdrop-filter: blur(15px) !important;
  box-shadow: 0 0 0 2px var(--tech-accent-subtle) !important;
}

/* 下拉菜单样式 - 半透明效果 */
.el-dropdown-menu {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--tech-glass-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--tech-shadow) !important;
  overflow: hidden !important;
}

.el-dropdown-menu__item {
  color: var(--tech-text-secondary) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.3s ease !important;
}

.el-dropdown-menu__item:hover {
  background: rgba(120, 220, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  color: var(--tech-accent-color) !important;
}

/* 对话框样式 */
.el-dialog {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--tech-glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--tech-shadow) !important;
}

.el-dialog__header {
  background: rgba(120, 220, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid var(--tech-glass-border) !important;
  color: var(--tech-text-primary) !important;
}

.el-dialog__body {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(8px) !important;
  color: var(--tech-text-secondary) !important;
}

.el-dialog__footer {
  background: rgba(120, 220, 255, 0.05) !important;
  backdrop-filter: blur(8px) !important;
  border-top: 1px solid var(--tech-glass-border) !important;
}

/* 标签页样式 */
.el-tabs__header {
  background: rgba(120, 220, 255, 0.05) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid var(--tech-glass-border) !important;
}

.el-tabs__item {
  color: var(--tech-text-secondary) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(5px) !important;
  border: 1px solid transparent !important;
  border-radius: 8px 8px 0 0 !important;
  margin-right: 4px !important;
}

.el-tabs__item:hover,
.el-tabs__item.is-active {
  color: var(--tech-accent-color) !important;
  background: rgba(120, 220, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  border-color: var(--tech-glass-border) !important;
}

/* 表单样式 */
.el-form {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(5px) !important;
}

.el-form-item__label {
  color: var(--tech-text-secondary) !important;
  font-weight: 500 !important;
}

/* 选择器样式 (排除登录页面) */
.main-layout .el-select .el-input__wrapper,
.dashboard-container .el-select .el-input__wrapper,
.content-wrapper .el-select .el-input__wrapper {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--tech-glass-border) !important;
}

.el-select-dropdown {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--tech-glass-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--tech-shadow) !important;
}

.el-select-dropdown__item {
  color: var(--tech-text-secondary) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.el-select-dropdown__item:hover,
.el-select-dropdown__item.is-selected {
  background: rgba(120, 220, 255, 0.15) !important;
  color: var(--tech-accent-color) !important;
}

/* 消息提示样式 */
.el-message {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(15px) !important;
  border: 1px solid var(--tech-glass-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--tech-shadow) !important;
  color: var(--tech-text-primary) !important;
}

.el-message--success {
  border-color: rgba(103, 194, 58, 0.5) !important;
}

.el-message--warning {
  border-color: rgba(230, 162, 60, 0.5) !important;
}

.el-message--error {
  border-color: rgba(245, 108, 108, 0.5) !important;
}

/* MessageBox 确认弹窗样式 - 简洁现代风格 */
.el-message-box {
  background: rgba(30, 35, 45, 0.95) !important;
  backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(70, 80, 100, 0.4) !important;
  border-radius: 12px !important;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
  color: var(--tech-text-primary) !important;
  overflow: hidden !important;
}

.el-message-box__header {
  background: transparent !important;
  border-bottom: 1px solid rgba(70, 80, 100, 0.3) !important;
  padding: 24px 24px 20px !important;
  position: relative !important;
}

.el-message-box__title {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  margin: 0 !important;
}

.el-message-box__content {
  background: transparent !important;
  padding: 20px 24px 24px !important;
}

.el-message-box__message {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.el-message-box__btns {
  background: transparent !important;
  border-top: 1px solid rgba(70, 80, 100, 0.3) !important;
  padding: 16px 24px !important;
  text-align: right !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

.el-message-box__btns .el-button {
  margin: 0 !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  min-width: 80px !important;
}

.el-message-box__btns .el-button--default {
  background: rgba(60, 70, 85, 0.8) !important;
  border: 1px solid rgba(100, 110, 130, 0.4) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.el-message-box__btns .el-button--default:hover {
  background: rgba(80, 90, 110, 0.9) !important;
  border-color: rgba(120, 130, 150, 0.6) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.el-message-box__btns .el-button--primary {
  background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
  border: 1px solid #c0392b !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3) !important;
}

.el-message-box__btns .el-button--primary:hover {
  background: linear-gradient(135deg, #ec7063, #e74c3c) !important;
  border-color: #e74c3c !important;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* MessageBox 图标样式 */
.el-message-box__status {
  color: #f39c12 !important;
  font-size: 20px !important;
  margin-right: 12px !important;
  opacity: 0.9 !important;
}

/* MessageBox 关闭按钮 */
.el-message-box__headerbtn {
  background: rgba(60, 70, 85, 0.6) !important;
  border: 1px solid rgba(100, 110, 130, 0.3) !important;
  border-radius: 4px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  transition: all 0.2s ease !important;
  width: 24px !important;
  height: 24px !important;
  top: 16px !important;
  right: 16px !important;
}

.el-message-box__headerbtn:hover {
  background: rgba(231, 76, 60, 0.8) !important;
  border-color: #e74c3c !important;
  color: white !important;
}

.el-message-box__close {
  color: inherit !important;
  font-size: 12px !important;
}

/* 侧边栏导航菜单样式 */
.el-menu {
  background: transparent !important;
  border: none !important;
  position: relative;
  z-index: 2;
}

/* 隐藏侧边栏菜单滚动条 */
.sidebar-menu {
  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 和 Edge */
}

.sidebar-menu::-webkit-scrollbar {
  display: none; /* Chrome, Safari 和 Opera */
}

/* 确保菜单容器可以滚动 */
.sidebar-menu {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* 隐藏主内容区域滚动条 */
.main-content {
  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 和 Edge */
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.main-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari 和 Opera */
}

.el-menu-item {
  color: var(--tech-text-secondary) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 10px !important;
  margin: 2px 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  font-weight: 400 !important;
  font-size: 14px !important;
}

.el-menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(120, 220, 255, 0.1), transparent);
  transition: left 0.5s ease;
  opacity: 0;
}

.el-menu-item:hover::before {
  left: 100%;
  opacity: 1;
}

.el-menu-item:hover {
  background: rgba(120, 220, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  color: var(--tech-accent-color) !important;
  border: 1px solid rgba(120, 220, 255, 0.3) !important;
  box-shadow: 0 4px 16px var(--tech-accent-glow) !important;
  transform: translateX(4px) !important;
}

.el-menu-item.is-active {
  background: rgba(120, 220, 255, 0.25) !important;
  backdrop-filter: blur(15px) !important;
  color: var(--tech-accent-color) !important;
  border: 1px solid var(--tech-accent-color) !important;
  font-weight: 600 !important;
  box-shadow:
    0 6px 20px rgba(120, 220, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateX(6px) !important;
}

.el-menu-item i {
  color: var(--tech-text-muted) !important;
  margin-right: 10px !important;
  font-size: 16px !important;
  transition: all 0.3s ease !important;
}

.el-menu-item:hover i,
.el-menu-item.is-active i {
  color: var(--tech-accent-color) !important;
  text-shadow: 0 0 8px var(--tech-accent-color) !important;
}

/* 子菜单样式 */
.el-sub-menu__title {
  color: var(--tech-text-secondary) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 10px !important;
  margin: 2px 12px !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
  position: relative;
}

.el-sub-menu__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--tech-accent-color), rgba(120, 220, 255, 0.3));
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.el-sub-menu.is-opened .el-sub-menu__title::before,
.el-sub-menu.is-active .el-sub-menu__title::before {
  opacity: 1;
}

.el-sub-menu__title:hover {
  background: rgba(120, 220, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  color: var(--tech-accent-color) !important;
  border: 1px solid rgba(120, 220, 255, 0.3) !important;
  transform: translateX(2px);
}

/* 子菜单容器 */
.el-sub-menu .el-menu {
  background: transparent !important;
  backdrop-filter: none !important;
  border-left: 2px solid rgba(120, 220, 255, 0.15) !important;
  margin-left: 20px !important;
  margin-right: 12px !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  position: relative;
}

.el-sub-menu .el-menu::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(120, 220, 255, 0.3) 0%,
    rgba(120, 220, 255, 0.15) 50%,
    rgba(120, 220, 255, 0.05) 100%);
  border-radius: 1px;
  opacity: 0.6;
}

/* 子菜单项样式 */
.el-sub-menu .el-menu .el-menu-item {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 6px !important;
  margin: 2px 8px !important;
  padding-left: 16px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.el-sub-menu .el-menu .el-menu-item::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background: rgba(120, 220, 255, 0.3);
  border-radius: 50%;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.el-sub-menu .el-menu .el-menu-item:hover {
  background: rgba(120, 220, 255, 0.12) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(120, 220, 255, 0.3) !important;
  color: var(--tech-accent-color) !important;
  transform: translateX(4px);
  box-shadow:
    0 2px 8px rgba(120, 220, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.el-sub-menu .el-menu .el-menu-item:hover::before {
  background: var(--tech-accent-color);
  width: 6px;
  height: 6px;
  box-shadow: 0 0 8px var(--tech-accent-color);
}

.el-sub-menu .el-menu .el-menu-item.is-active {
  background: rgba(120, 220, 255, 0.2) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--tech-accent-color) !important;
  color: var(--tech-accent-color) !important;
  font-weight: 500 !important;
  box-shadow:
    0 4px 12px rgba(120, 220, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.el-sub-menu .el-menu .el-menu-item.is-active::before {
  background: var(--tech-accent-color);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 12px var(--tech-accent-color);
}

/* 子菜单图标样式 */
.el-sub-menu .el-menu .el-menu-item .el-icon {
  margin-right: 8px !important;
  font-size: 14px !important;
  color: rgba(120, 220, 255, 0.6) !important;
  transition: all 0.3s ease !important;
}

.el-sub-menu .el-menu .el-menu-item:hover .el-icon,
.el-sub-menu .el-menu .el-menu-item.is-active .el-icon {
  color: var(--tech-accent-color) !important;
  transform: scale(1.1);
}

/* 子菜单展开动画 */
.el-sub-menu .el-menu {
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.el-sub-menu:not(.is-opened) .el-menu {
  max-height: 0 !important;
  padding: 0 !important;
  opacity: 0;
  transform: translateY(-10px);
}

.el-sub-menu.is-opened .el-menu {
  max-height: 500px !important;
  opacity: 1;
  transform: translateY(0);
}

/* 子菜单项进入动画 */
.el-sub-menu.is-opened .el-menu .el-menu-item {
  animation: slideInFromLeft 0.3s ease forwards;
}

.el-sub-menu.is-opened .el-menu .el-menu-item:nth-child(1) {
  animation-delay: 0.1s;
}

.el-sub-menu.is-opened .el-menu .el-menu-item:nth-child(2) {
  animation-delay: 0.15s;
}

.el-sub-menu.is-opened .el-menu .el-menu-item:nth-child(3) {
  animation-delay: 0.2s;
}

.el-sub-menu.is-opened .el-menu .el-menu-item:nth-child(4) {
  animation-delay: 0.25s;
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 父级菜单激活状态增强 */
.el-sub-menu.is-active > .el-sub-menu__title {
  background: rgba(120, 220, 255, 0.18) !important;
  border: 1px solid var(--tech-accent-color) !important;
  color: var(--tech-accent-color) !important;
  font-weight: 600 !important;
  box-shadow:
    0 4px 12px rgba(120, 220, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 菜单层级指示器 - 仅在交互时显示 */
.el-menu-item,
.el-sub-menu__title {
  position: relative;
}

.el-menu-item::after,
.el-sub-menu__title::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--tech-accent-color);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 0 6px var(--tech-accent-color);
}

.el-menu-item:hover::after,
.el-menu-item.is-active::after,
.el-sub-menu__title:hover::after,
.el-sub-menu.is-active .el-sub-menu__title::after {
  opacity: 1;
}

/* 收起状态下的样式优化 */
.el-menu--collapse .el-menu-item,
.el-menu--collapse .el-sub-menu__title {
  justify-content: center;
  padding: 0 !important;
  margin: 4px 8px !important;
}

.el-menu--collapse .el-menu-item::after,
.el-menu--collapse .el-sub-menu__title::after {
  display: none;
}

/* 菜单整体间距优化 */
.el-menu {
  padding: 8px 0 !important;
}

.el-menu .el-menu-item,
.el-menu .el-sub-menu__title {
  min-height: 40px !important;
  line-height: 40px !important;
}

.el-sub-menu .el-menu .el-menu-item {
  min-height: 36px !important;
  line-height: 36px !important;
}

/* 加载样式 */
.el-loading-mask {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(5px) !important;
}

.el-loading-spinner {
  color: var(--tech-accent-color) !important;
}

/* 强制覆盖所有白色背景 */
.el-table__body-wrapper,
.el-table__header-wrapper,
.el-table__footer-wrapper {
  background: transparent !important;
}

.el-table__body tr {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(8px) !important;
}

.el-table__body tr:hover {
  background: rgba(120, 220, 255, 0.12) !important;
  backdrop-filter: blur(12px) !important;
}

.el-table__header tr {
  background: rgba(120, 220, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
}

/* 表格内部元素强制透明 */
.el-table__body tr td,
.el-table__header tr th {
  background: transparent !important;
}

.el-table__body tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(8px) !important;
}

.el-table__body tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.01) !important;
  backdrop-filter: blur(8px) !important;
}

/* 表格容器强制透明 */
.el-table__inner-wrapper {
  background: transparent !important;
}

.el-table--border {
  border-color: var(--tech-glass-border) !important;
}

.el-table--border::after {
  background: var(--tech-glass-border) !important;
}

.el-table--border::before {
  background: var(--tech-glass-border) !important;
}

/* 表格固定列背景 */
.el-table__fixed,
.el-table__fixed-right {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(15px) !important;
}

.el-table__fixed::before,
.el-table__fixed-right::before {
  background: transparent !important;
}

/* 表格空状态 */
.el-table__empty-text {
  color: var(--tech-text-muted) !important;
}

/* 表格加载状态 */
.el-table__loading-wrapper {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(5px) !important;
}

/* 面包屑导航强化 */
.el-breadcrumb {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(8px) !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--tech-glass-border) !important;
}

/* 搜索框区域 */
.search-form {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--tech-glass-border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}

/* 工具栏区域 */
.toolbar {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--tech-glass-border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
}

/* 状态标签 */
.el-tag {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--tech-glass-border) !important;
  color: var(--tech-text-primary) !important;
  border-radius: 6px !important;
}

.el-tag--success {
  background: rgba(103, 194, 58, 0.2) !important;
  border-color: rgba(103, 194, 58, 0.5) !important;
  color: #67c23a !important;
}

.el-tag--warning {
  background: rgba(230, 162, 60, 0.2) !important;
  border-color: rgba(230, 162, 60, 0.5) !important;
  color: #e6a23c !important;
}

.el-tag--danger {
  background: rgba(245, 108, 108, 0.2) !important;
  border-color: rgba(245, 108, 108, 0.5) !important;
  color: #f56c6c !important;
}

/* 全局强制覆盖白色背景 */
*[style*="background-color: white"],
*[style*="background-color: #fff"],
*[style*="background-color: #ffffff"],
*[style*="background: white"],
*[style*="background: #fff"],
*[style*="background: #ffffff"] {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(10px) !important;
}

/* 最高优先级的白色背景覆盖 (排除登录页面) */
.main-layout .el-table,
.main-layout .el-table__body,
.main-layout .el-table__header,
.main-layout .el-table__footer,
.main-layout .el-card,
.main-layout .el-card__body,
.main-layout .el-card__header,
.main-layout .el-form,
.main-layout .el-form-item,
.main-layout .el-input,
.main-layout .el-button,
.main-layout .el-select,
.main-layout .el-dropdown,
.main-layout .el-pagination,
.main-layout .el-breadcrumb,
.main-layout .el-tabs,
.main-layout .el-tab-pane,
.dashboard-container .el-table,
.dashboard-container .el-table__body,
.dashboard-container .el-table__header,
.dashboard-container .el-table__footer,
.dashboard-container .el-card,
.dashboard-container .el-card__body,
.dashboard-container .el-card__header,
.dashboard-container .el-form,
.dashboard-container .el-form-item,
.dashboard-container .el-input,
.dashboard-container .el-button,
.dashboard-container .el-select,
.dashboard-container .el-dropdown,
.dashboard-container .el-pagination,
.dashboard-container .el-breadcrumb,
.dashboard-container .el-tabs,
.dashboard-container .el-tab-pane,
.content-wrapper .el-table,
.content-wrapper .el-table__body,
.content-wrapper .el-table__header,
.content-wrapper .el-table__footer,
.content-wrapper .el-card,
.content-wrapper .el-card__body,
.content-wrapper .el-card__header,
.content-wrapper .el-form,
.content-wrapper .el-form-item,
.content-wrapper .el-input,
.content-wrapper .el-button,
.content-wrapper .el-select,
.content-wrapper .el-dropdown,
.content-wrapper .el-pagination,
.content-wrapper .el-breadcrumb,
.content-wrapper .el-tabs,
.content-wrapper .el-tab-pane {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(10px) !important;
}

/* 全局弹窗组件样式 (这些不受登录页面影响) */
.el-dialog,
.el-drawer,
.el-popover,
.el-tooltip,
.el-message,
.el-notification {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(10px) !important;
}

/* 强制所有可能的白色背景元素 (排除登录页面) */
.main-layout div[style*="background"],
.main-layout span[style*="background"],
.main-layout section[style*="background"],
.main-layout article[style*="background"],
.dashboard-container div[style*="background"],
.dashboard-container span[style*="background"],
.dashboard-container section[style*="background"],
.dashboard-container article[style*="background"],
.content-wrapper div[style*="background"],
.content-wrapper span[style*="background"],
.content-wrapper section[style*="background"],
.content-wrapper article[style*="background"] {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(8px) !important;
}

/* 全局强制隐藏所有滚动条 - 最高优先级 */
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

*::-webkit-scrollbar-track {
  display: none !important;
  background: transparent !important;
}

*::-webkit-scrollbar-thumb {
  display: none !important;
  background: transparent !important;
}

*::-webkit-scrollbar-corner {
  display: none !important;
  background: transparent !important;
}

/* 特别针对body和html */
html, body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 特定组件的白色背景覆盖 */
.el-popper,
.el-tooltip__popper,
.el-popover {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(15px) !important;
  border: 1px solid var(--tech-glass-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--tech-shadow) !important;
}

.el-popper .el-popper__arrow::before {
  background: var(--tech-glass-bg) !important;
  border-color: var(--tech-glass-border) !important;
}

/* 确保所有内容区域都是透明的 */
.main-content,
.content-wrapper,
.page-container {
  background: transparent !important;
}

/* 表单容器 */
.form-container,
.search-container {
  background: var(--tech-glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--tech-glass-border) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

/* 最高优先级分页器样式覆盖 - 解决白色背景问题 */
.el-pagination,
.el-pagination .el-pager,
.el-pagination .el-pager li,
.el-pagination .btn-prev,
.el-pagination .btn-next,
.el-pagination__total,
.el-pagination__sizes,
.el-pagination__jump,
.el-pagination__jump .el-input,
.el-pagination__jump .el-input__wrapper,
.el-pagination__sizes .el-select,
.el-pagination__sizes .el-select .el-input,
.el-pagination__sizes .el-select .el-input__wrapper {
  background: transparent !important;
  background-color: transparent !important;
}

/* 分页器容器强制透明 */
.pagination,
.pagination-container,
.el-pagination-container {
  background: transparent !important;
  background-color: transparent !important;
}

/* 分页器按钮重新定义 */
.el-pagination .el-pager li {
  background: rgba(120, 220, 255, 0.1) !important;
  background-color: rgba(120, 220, 255, 0.1) !important;
  border: 1px solid rgba(120, 220, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

.el-pagination .el-pager li:hover,
.el-pagination .el-pager li.is-active {
  background: rgba(120, 220, 255, 0.3) !important;
  background-color: rgba(120, 220, 255, 0.3) !important;
  border-color: rgba(120, 220, 255, 0.6) !important;
  color: #ffffff !important;
}

.el-pagination .btn-prev,
.el-pagination .btn-next {
  background: rgba(120, 220, 255, 0.1) !important;
  background-color: rgba(120, 220, 255, 0.1) !important;
  border: 1px solid rgba(120, 220, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

.el-pagination .btn-prev:hover,
.el-pagination .btn-next:hover {
  background: rgba(120, 220, 255, 0.3) !important;
  background-color: rgba(120, 220, 255, 0.3) !important;
  border-color: rgba(120, 220, 255, 0.6) !important;
  color: #ffffff !important;
}

/* 禁用状态 */
.el-pagination .btn-prev:disabled,
.el-pagination .btn-next:disabled {
  background: rgba(120, 220, 255, 0.05) !important;
  background-color: rgba(120, 220, 255, 0.05) !important;
  border-color: rgba(120, 220, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.3) !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .tech-card {
    border-radius: 8px;
    padding: 16px;
  }

  .tech-stats-card {
    padding: 16px;
  }

  .tech-stats-value {
    font-size: 24px;
  }
}
